站点:前端开发文档
原文:CSS选择器
原文:CSS继承属性
原文:CSS3核心模块
原文:CSS盒子模型
原文:CSS背景图像
原文:CSS清除浮动
原文:CSS定位
CSS选择器
-
并集:对选择器进行分组,被分组的选择器可以分享相同的声明。用逗号将需要分组的选择器开分。
h1,h2,h3,h4,h5,h6{}
-
交集:两种属性同属一个元素
-
p.name{}
、p#id{}
、.name1.name2{}
-
-
后代(派生):根据元素在位置上的关系定义样式,使用空格隔开,后代选择器尽量不要超过3个,不必把每个层级都列出,只需要写关键点即可
li strong {}
-
子代:只能选择作为某元素的子元素,只选择子代,往后孙子一代不选择
h1 > strong {}
-
兄弟和相邻兄弟:选择紧接在另一元素后的,并且二者有相同父元素
h1 + p {}
-
属性:对带有指定属性的HTML元素设置样式,权重为10
-
属性选择器:为带有
title
属性的所有元素设置样式,[title] {}
-
属性和值选择器:为
title="name"
的所有元素设置样式,[title=name] {}
-
设置表单的样式:
input[type="text"] {}
-
属性选择器:为带有
-
伪类:
-
:active
:被激活的元素 -
:focus
:有键盘输入焦点的元素 -
:hover
:鼠标悬停 -
:link
:未被访问的链接 -
:visited
:已被访问的链接 -
:first-child
:元素的第一个子元素 -
:lang
:带有指定lang
属性的元素
-
-
权重:
-
div
(1) -
class/类选择器
(10) -
id
(100)
-
-
结构选择器(新增伪类(面试题))
-
:not
:排除 -
:nth-child(n)
:第几个元素 从1开始设置 -
:nth-child(2n)
:偶数元素 从0开始设置 -
:nth-child(2n+1)
:奇数元素 -
:nth-of-type(n)
:某个元素下同类型的第几个元素 -
:nth-last-child
:倒数第几个元素 -
:first-child->:nth-child(1)
: -
:fisrt-of-type
:第一个同级兄弟元素 -
:last-of-type
:最后一个同级兄弟元素 -
:nth-of-type(n)
:第几个同级兄弟元素 -
:last-child
:最后一个子元素 -
:only-child
:仅有一个子元素 -
:only-of-type
:只有一个同类型的子元素 -
:empty
:空内容 -
:checked
:被选中 主要用在input
表单元素
-
-
属性选择器
-
E[attr=val]
: -
E[attr|=val]
:只能等于val
或只能以val-
开头 -
E[attr*=val]
:包含val
字符串 -
E[attr~=val]
:属性值有多个,其中一个是val
-
E[attr^=val]
:以val
开头 -
E[attr$=val]
:以val
结尾
-
-
目标伪类选择器
-
:target()
:用来匹配URL指向的目标元素(存在URL指向该匹配元素时,样式效果才会生效)
-
-
伪元素:
-
:first-line
:匹配首行文本,只能用于块级元素 -
:first-letter
:匹配首字符 -
:before/:after
:DOM元素前后插入额外的内容- 遇到伪元素
before/after
就要加上content=''
-
display: block;
:独占一行 -
display: inline-block;
:不独占一行
- 遇到伪元素
-
CSS继承属性
-
无继承性的属性
-
display
:规定元素应该生成的框的类型 -
文本属性:
-
vertical-align
:垂直文本对齐 -
text-decoration
:添加文本装饰 -
text-shadow
:文本阴影效果 -
white-space
:空白符的处理 -
unicode-bidi
:设置文本的方向
-
-
盒子模型的属性:
-
width
、height
-
margin
、margin-top/right/bottom/left
-
border
、border-top/right/bottom/left
-
border-style
、border-top/right/bottom/left-style
-
border-width
、border-top/right/bottom/left-width
-
border-color
、border-top/right/bottom/left-color
-
padding
、padding-top/right/bottom/left
-
-
背景属性:
background
background-color
background-image
background-repeat
background-position
background-attachment
-
定位属性:
float
clear
position
top/right/bottom/left
-
min-width/min-height
、max-width/max-height
overflow
clip
z-index
-
生成内容属性:
content
counter-reset
counter-increment
-
轮廓样式属性:
outline-style
outline-width
counter-color
outline
-
-
有继承性的属性
-
字体系列属性
-
font
:组合字体 -
font-family
:字体系列 -
font-weight
:字体粗细 -
font-size
:字体尺寸 -
font-style
:字体风格 -
font-variant
:小写字母转换为大写,字体尺寸更小 -
font-stretch
:对当前font-family
进行伸缩变形。所有主流浏览器不支持。 -
font-size-adjust
:为某个元素规定一个aspect
值,保持首选字体的x-height
-
-
文本系列属性
-
text-indent
:文本缩进 -
text-align
:文本水平对齐 -
line-height
:行高 -
word-spacing
:字间距 -
letter-spacing
:字符间距 -
text-transform
:控制文本大小写 -
direction
:文本书写方向 -
color
:文本颜色
-
- 元素可见性:
visibility
-
表格布局属性
caption-side
border-collapse
border-spacing
empty-cells
table-layout
-
列表布局属性
list-style-type
list-style-image
list-style-position
list-style
- 生成内容属性:
quotes
- 光标属性:
cursor
-
页面样式属性
page
page-break-inside
windows
orphans
-
CSS3核心模块
过渡动画
-
transition
:过渡动画-
transition-property
:过渡属性all[attr]
-
transition-duration
:过渡时间 -
transition-delay
:延迟时间 -
transition-timing-function
:运行类型-
ease
:(逐渐变慢)默认值 -
linear
:匀速 -
ease-in
:加速 -
ease-out
:减速 -
cubic-bezier
:贝塞尔曲线
-
-
过渡动画效果思考步骤:
- 找到过渡属性
- 找到过渡属性起始值和结束值
- 在合适的位置上增加
transition
属性
2D变换
-
transform
:变形属性-
rotate()
:旋转函数-
deg
:度数 -
transform-origin
:旋转的基点
-
-
skew()
:倾斜函数skewX()
skewY()
-
scale()
:缩放函数 默认值是1scaleX()
scaleY()
-
translate()
:位移函数translateX()
translateY()
-
animation-声明关键帧
-
关键帧——
@keyframes
-
类似于
flash
- 定义动画在每个阶段的样式,即帧动画
-
关键帧的时间单位
- 数字:
0%
、25%
、100%
等(设置某个时间段内任意时间点的样式) - 字符:
from(0%)
、to(100%)
:
- 数字:
-
格式
-
@keyframes
:动画名称 {动画状态}
-
-
animation-调用动画
-
必要属性
-
animation-name
:动画名称(关键帧名称) -
animation-duration
:动画执行时间
-
-
可选属性:
-
animation-timing-function
-
linear
:匀速 -
ease
:缓冲 -
ease-in
:由慢到快 -
ease-out
:由快到慢 -
ease-in-out
:由慢到快再到慢 -
ease-bezier(num,num,num,num)
:特定的贝塞尔曲线类型,4个数值需在[0,1]区间内
-
-
animation-delay
:动画延迟 -
animation-iteration-count
:重复次数 -
animation-direction
:动画运行的方向normal|reverse|alternate|alternate-reverse
-
animation-play-state
:动画状态running|paused
-
animation-fill-mode
:动画结束后的状态none|forwards|backwards|both
-
3D变换
-
transform-style: flat|preserve-3d
:3D空间展示 -
perspective
:景深效果 -
transform: persective(800px)
:直接作用在子元素上 -
transform
:新增函数-
translate3d(tx, ty, tz)
:translateX()
translateY()
translateZ()
-
rotate3d(rx, ry, rz, a)
:rotateX()
rotateY()
rotateZ()
-
scale3d(sx, sy, sz)
:sacleX()
sacleY()
sacleZ()
-
圆角 border-radius
-
border-radius
:1-4个数字/1-4个数字- 水平半径/垂直半径
- 四个数字方向分别是左上 右上 右下 左下
-
没有
/
则水平半径和垂直半径一样border-radius: 10px/5px;
- border-radius: 60px 40px 30px 30px/30px 20px 10px 5px
- 例子:圆 椭圆 半圆 扇形
线性渐变 linear-gradient
-
linear-gradient
:([<起点>||<角度>,]?<点>,<点>...) - 只能用在背景上
- 颜色是沿着一条直线轴变化
-
参数
- 起点:开始渐变方向
- 角度:开始渐变角度
- 点:渐变点的颜色和位置
- 重复线性渐变
径向渐变 radial-gradient
radial-gradient
- 从“一点”向多个方向颜色渐变
-
shape
形状:ellipse
、circle
或设置水平半径,垂直半径 -
size
:渐变的大小,即渐变停止位置:-
closet-side
:最左边 -
farthest-side
:最远边 -
closet-corner
:最近角 -
farthest-corner
:最远角(默认值)
-
-
position
:关键词|数值|百分比 - 重复的径向渐变
背景
-
background-origin
-
padding-box
:从padding
区域显示 -
border-box
:从border
区域显示 -
content-box
:从content
区域显示
-
-
background-clip
-
padding-box
:从padding
区域向外裁剪 -
border- box
:从border
区域向外裁剪 -
content-box
:从content
区域向外裁剪 -
text
:文本裁剪
-
-
background-size
-
100% 100%
:百分比 -
10px 10px
:数值 -
contain
:按原始比例收缩,背景图显示完整,但不一定铺满整个容器 -
cover
:按原比例收缩,背景图可能显示不完整,但铺满整个容器
-
-
background-attachment
- 背景图片是滚动/固定
fixed
(固定的) 默认是滚动的
- 背景图片是滚动/固定
盒子阴影
-
box-shadow
:h v blur spread color inset;-
h
:水平方向偏移 -
v
:垂直方向偏移 -
blur
:模糊半径 -
spread
:扩展半径 -
color
:颜色 -
inset
:内阴影,默认是外阴影
-
文本阴影
-
text-shadow
:x y blur color-
x
轴偏移y
轴偏移 模糊度 颜色 - 多层阴影制作文字立体效果,设置多种颜色,中间以逗号隔开
-
-
文字添加边框
-
text-stroke
:2px blue- 通过设定
1px
的透明边框,可以让文字变得平滑 - 颜色设成透明能够创建镂空字体
- 通过设定
-
滤镜
-
-webkit-filter:normal;
:正常 -
-webkit-filter:grayscale(1);
:灰度,取值范围0-1 -
-webkit-filter:brightness(0);
:亮度,取值范围0-1 -
-webkit-filter:invert(1);
:反色,取值范围0-1,0为原图,1为彻底反色 -
-webkit-filter:sepia(0.5);
:叠加褐色,取值范围0-1 -
-webkit-filter:hue-rotate(30deg);
:色相(按照色相环旋转,顺时针方向)(红-橙-黄-黄绿-绿-蓝绿-蓝-蓝紫-紫-紫红-红)此处为叠加黄色滤镜 -
-webkit-filter:saturate(4);
:饱和度,取值范围0-*,0为无饱和度,1为原图,值越高,饱和度越大 -
-webkit-filter:contrast(2);
:对比度,取值范围0-*,0为无对比度(灰色),1为原图,值越高对比度越大 -
-webkit-filter:opacity(0.8);
:透明度,取值范围0-1,0为全透明,1为原图
遮罩
-
mask-image
: -
mask-position
: -
mask-repeat
:
CSS盒子模型
border
边框
-
三角形箭头:
- 正方形的任意相邻两条边,然后旋转一定的角度,得到我们需要的任意方向的箭头
-
border
、border-width
、border-style
、border-color
-
三角形:
-
border
的3个属性:border-width/border-style/border-color
,宽度和高度都为0
,三角形箭头方向设定颜色,其余方向颜色设为透明transparent
-
margin
边距
-
margin
边距重叠: 取大值,不是两者相加之和。 -
margin-top
的传递:大盒嵌套小盒,小盒加margin-top
值,传递到大盒,导致整体下移。-
解决
margin
的兼容性问题:float: left;
overflow: hidden;
padding-top: 0/1px;
border-top: 1px solid transparent;
-
CSS背景图像
background
背景
主要属性:
-
background-color
:背景颜色,简写background
- 不能继承,默认是
transparent
-
inherit
指定背景颜色,从父元素继承
- 不能继承,默认是
-
background-image
:背景图片-
url
:图片URL地址 -
node
:默认值 背景上未放置图片 -
inherit
:指定背景图片从父元素继承 -
一个元素可以引入多张背景图片;
- 指定要使用的一个或多个背景图片,默认情况下,
background-image
放置在元素的左上角,并重复垂直和水平方向
- 指定要使用的一个或多个背景图片,默认情况下,
- 属性不能继承
-
-
background-repeat
:背景重复- 默认重复
background-image
的垂直和水平方向 -
repeat
默认 -
repeat-x
只有水平位置重复 -
repear-y
只有垂直位置重复 -
no-repeat
不重复 -
inherit
从父元素继承
- 默认重复
-
background-position
:背景定位- 设置背景图片的起始位置
-
x
、y
水平位置,垂直位置。左上角是0
。单位(px,关键字,百分数) - 关键字成对出现
left right top bottom center
,仅指定一个关键字,其他值将会是center
- 只设定
x
轴方向,默认y
轴为center
-
inherit
从父元素继承
-
background-attachment
:背景关联- 设置背景图片固定或随页面的其余部分滚动
-
scroll
默认 -
fixed
固定 -
inherit
从父元素继承
-
background-size
:背景图像的尺寸大小-
<length>
长度值指定图像大小。不允许负值 -
<percentage>
百分比指定图像大小。不允许负值 -
auto
图像的真实大小 -
cover
将背景图像等比例缩放到完全覆盖容器,有可能超出容器 -
contain
等比例所放到宽/高与容器的宽/高相等,背景图像始终被包含在容器内
-
-
background-origin
:设置背景图像的参考原点(位置)-
padding-box
:从padding
区域(含padding
)开始显示背景 -
border-box
:从border
区域(含border
)开始显示背景 -
content-box
:从content
区域开始显示背景
-
-
background-clip
:设置对象的背景图像向外裁剪的区域-
padding-box
:从padding
区域(不含padding
)开始向外裁剪背景 -
border-box
:从border
区域(不含border
)开始向外裁剪背景 -
content-box
:从content
区域开始向外裁剪背景 -
text
:从前景内容的形状(比如文字)作为裁剪区向外裁剪,实现使用背景作为填充色之类的遮罩效果。
-
- 雪碧图:
background-position: x y
CSS清除浮动
overflow: hidden
-
overflow
溢出隐藏 - 清除浮动
- 解决
margin-top
的传递问题
(面试题):
-
单行文本出现省略号(4个必备条件,缺一不可)
-
width
宽度(不写宽度,默认继承父元素宽度) -
overflow: hidden;
(溢出隐藏) white-space: nowrap;
-
text-overflow: ellipsis;
文字隐藏的方式,以省略号的方式隐藏
-
-
多行文本出现省略号(必备条件,主要应用在移动端)
-
display: -webkit-box;
弹性盒模型 -
-webkit-box-orient: vertical;
规定元素的排列方式:垂直排列 -
-webkit-line-clamp: 2;
:文字的行数(自定义) -
overflow: hidden;
溢出隐藏
-
-
多个元素在一行显示的方法
display: inline;
display: inline-block;
float: left/right;
display: inline-block;
元素的特点
- 盒子横向排列
-
verticle-align
属性会影响inline-block
元素,值可能会设为top
- 需要设置每一列的宽度
-
如果HTML源码中元素间有空格,列与列之间会产生空隙
-
解决方法:
- 如果元素添加了
dispay: inline-block;
,父元素增加一个属性font-size: 0;
,同时在元素本身增加font-size
属性进行覆盖
- 如果元素添加了
-
-
display:inline-block;
在IE6/7下不兼容的解决方法- 增加
display: inline; zoom: 1;
属性
- 增加
IE7下块元素兼容display: inline-block;
写法?
- 直接让块元素设置为内联对象(设置属性
display: inline;
),然后触发块元素的layout
(如:zoom: 1;
等)。 - 兼容各浏览器的代码如下:
div {display: inline-block; *display: inline; *zoom: 1;}
float
浮动
float
元素的特点
- 在一行显示
- 设置属性值为
left
时,浮动元素依次从父级盒子的左侧向右排列 - 自动具有块级元素的属性,不需要添加
display: block;
- 脱离文档流
- 子元素不会继承浮动属性
- 浮动元素下面的元素不能识别浮动元素的高度和位置,占据浮动元素的位置
- 所有的元素都可以使用浮动属性
文档流和脱离文档流
- 文档流:元素排版布局过程中,元素自动从左往右,从上往下的流式排列。
- 每个非浮动元素块级元素独占一行,浮动元素按规则浮在行的一端。当前行容量满则另起一行浮动。
- 内联元素不会独占一行
- 几乎所有元素(包括块级、内敛和列表元素)均可生成子行,用于摆放子元素
- 标准文档流等级:分为两个等级,块级元素和行内元素
- 脱离文档流:文档流内的正常元素识别不到这个元素(脱离文档流的元素相当于平行漂浮于文档流之上)
float
元素产生的影响
- 父元素设置背景颜色
background-color
不起作用 - 父元素设置内边距属性
padding
不会被撑开 - 父元素设置边框属性
border
不会被撑开
清除浮动float
清除浮动的方法
- 给浮动元素的父级元素添加固定的高度
height
(不推荐) - 给浮动元素的父级元素添加溢出隐藏属性
overflow: hidden;
; -
给最后一个浮动元素后面添加一个块级元素,这个块级元素带有
clear: both;
属性-
clear
清除浮动元素对文档流内元素的影响(可以让文档流内的元素识别到浮动元素的高度) -
left
清除float
为left
的影响 -
right
清除float
为right
的影响 -
both
清除float
所有的影响 -
inherit
从父级元素上继承该属性值
-
-
clearfix
清除浮动(固定代码)- 利用伪元素
:after
清除浮动必备条件,缺一不可 -
display: block;
确保元素是一个块级元素 -
clear: both;
不允许左右两边有浮动对象 -
content: '';
伪元素:brfore/:after
自带的属性,如果不写,伪元素不起作用 - 写全的样式属性;不是必备条件
-
height: 0;
防止在低版本浏览器中默认height: 1px;
的情况,用height: 0;
去覆盖 -
font-size: 0;
字体大小 -
overflow: hidden;
溢出隐藏 -
visibility: hidden;
让所有可见性的元素隐藏
- 利用伪元素
overflow: hidden;
和visibility: hidden;
有什么区别?
(面试题):如何让一个元素消失?
-
opacity: 0;
[0-1] 透明度 -
display: none;
隐藏 -
widht/height/line-height + overflow
:宽/高/行高 + 溢出隐藏 -
visibility: hidden;
让所有可见性的元素隐藏
clear: both;
的特点
- 元素需要是块级元素
- 元素不能带有浮动属性
- 元素必须放在最后一个浮动元素的后面
CSS定位
-
相对定位-
position: relative;
- 没有脱离文档流
- 参照物是元素本身位置
- 当
top
和bottom
同时有值的情况下,top
值生效,支持负值 - 当
left
和right
同时有值的情况下,left
值生效,支持负值 - 任何元素都可以设置相对定位属性
- 相对定位元素位移发生改变,但元素原来的位置还会被占用,其他元素还是正常识别这个元素原来的位置
-
绝对定位-
position: absolute;
- 脱离文档流
- 可以设置参照物,参照物必须是其父级元素(直系父级),如果没有直接父级会一直往上查找直到找到最外层的根元素为止;
- 有宽度和高度的情况下,
top
和bottom
同时有值,top
生效;left
和right
同时有值,left
生效。 - 没有宽度和高度的情况下,
top
和bottom
同时设置值的情况下,会将这个盒子拉大,上下值都起作用,左右同理。 - 可以设置层级关系
z-index
属性,必须要和定位元素(绝对,相对,固定)同时使用,才会起作用。 - 一个元素定位在另一个元素上或者两个元素叠加的情况,都可以使用定位(绝对定位)
- 绝对定位一定要设置相对参照物
-
固定定位-
position: fixed;
- 脱离文档流
- 参照物是浏览器的可视窗口
- 任何元素都可以设置固定定位
- 可设置
top/bottom/left/right
四个方位 - 可通过
z-index
改变层级
-
z-index
属性的特点- 默认是书写顺序在后的定位元素覆盖顺序在前的定位元素
- 可以使用
z-index
属性修改定位元素的层级关系 - 所有定位元素的
z-index
默认值都一样 -
z-index
值是数字没有单位,支持负数 - 一般都是同级元素进行层级的比较
- 当参照物是相对定位或绝对定位的时候,父级元素之间没有
z-index
值,子元素的z-index
值进行比较
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。